<template>
  <div style="padding: 10px">
    <!--    功能区域-->

    <!--    搜索区域-->
    <div style="margin: 10px 0">
      <el-input v-model="search" placeholder="请输入关键字" style="width: 20%" clearable></el-input>
      <el-button type="primary" style="margin-left: 5px" @click="load">查询</el-button>
      <el-button type="primary" style="margin-left: 5px" @click="add">新增</el-button>
      <el-button type="primary" style="margin-left: 10px" @click="exportData">Excel导出</el-button>
      <el-button type="primary" style="margin-left: 10px" @click="exportWord">Word导出</el-button>
    </div>


  <el-space wrap >
    <el-card v-for="i in this.tableData" :key="i" class="box-card card-body" >
      <template #header>
        <div class="card-header card-style">
          <span>{{i.goods}}</span>
        
        </div>
      </template>
      <div class="code divStyle" :title="i.introductions" >
         {{i.introductions}} 
      </div>
      <el-image style="width: 200px; height: 175px; margin-left: 30px" :src="i.photo" :fit="scale-down" />
       <div class="price">
          ￥:{{i.price}}元
      </div>
      <div class="goumai">
        <el-button class="button" type="success" @click="buy(i.id)">购买</el-button>
      </div>
        
    </el-card>
  </el-space>

    <el-dialog title="新增商品" v-model="dialogVisible" >

      <el-form :model="form"
      ref="form" label-width="auto"
      label-position="right">

        <el-form-item label="商品名称:">
          <el-input v-model="form.goods" style="width: 50%" />
        </el-form-item>
        <!--                action="http://192.168.32.3:63010/order/shop/uploadFile"-->
        <el-form-item label="商品图片">
            <el-upload
                class="avatar-uploader"
                action="http://localhost:63010/order/shop/uploadFile"
                :show-file-list="true"
                :headers="headers"
                :on-success="handleSuccess">
              <img v-if="form.photo" :src="form.photo" class="avatar" alt="">
              <el-icon v-else class="avatar-uploader-icon">
                <Plus/>
              </el-icon>
            </el-upload>
        </el-form-item>
        <el-form-item label="商品属性:">
          <el-input v-model="form.first" />
        </el-form-item>

        <el-form-item label="商品价格:">
          <el-input v-model="form.price" type="number" style="width: 50%" />
        </el-form-item>

        <el-form-item label="商品描述:">
          <el-input v-model="form.introductions" type="longText" />
        </el-form-item>

        <el-form-item>
          <el-button  type="primary" @click="sunm">发布</el-button>
          <el-button @click="this.dialogVisible = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>


    <div style="margin: 10px 0">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5, 10, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>


    </div>
  </div>
</template>

<script>

import '@/assets/css/release.css'
import goods from "@/api/goods"
import {Plus} from "@element-plus/icons";

export default {
  name: 'goods',
  components: {
    Plus

  },
  data() {
    return {
      imageUrl:'',
      headers:{},
      token:"",
      user: {},
      loading: true,
      form: {
        photo:'',
      },
      goods:{
        search:this.search
      },
      dialogVisible: false,
      search: '',
      currentPage: 1,
      pageSize: 8,
      total: 0,
      tableData: [],
      ids: []
    }
  },
  created() {
    this.load()
  },
  mounted() {
    this.token = sessionStorage.getItem("Authorization")
    this.headers = {Authorization: this.token}
    console.log(this.headers,"heards")
  },
  methods: {

    handleSuccess(res){
      console.log(res,"上传成功返回结果")
      if(res.code === 0){
        this.form.photo = res.data
        this.$message({
          type: "success",
          message: res.msg
        })
      }else{
        this.$message({
          type: "error",
          message: res.msg
        })
      }
    },

    async sunm(){
    const  res = await goods.addGoods(this.form)
      if(res.code === 0){
        this.$message({
          type: "success",
          message: res.msg
        })
      }else{
        this.$message({
          type: "error",
          message: res.msg
        })
      }
      this.dialogVisible = false;
      this.load();

},

    add(){
      this.dialogVisible =true;
    },

     buy(id) {
        goods.buyGoods(id).then(res => {
          console.log(res,"下单返回数据");
          
          if(res.code === 0){
             this.$message({
                type: "success",
                message: res.msg
              })
            this.$router.push("/order")
          }else{
             this.$message({
                type: "error",
                message: res.msg
              })
          }
        })
      },
    handleSizeChange(pageSize) {   // 改变当前每页的个数触发
      this.pageSize = pageSize
      this.load()
    },
    handleCurrentChange(pageNum) {  // 改变当前页码触发
      this.currentPage = pageNum
      this.load()
    },
      handleSelectionChange(val) {
        this.ids = val.map(v => v.id)   // [{id,name}, {id,name}] => [id,id]
      },
      filesUploadSuccess(res) {
        console.log(res)
        this.form.cover = res.data
      },
    load() {
      this.loading = true
      goods.getList(this.currentPage,this.pageSize,this.search).then((res)=>{
        this.loading = false
        this.tableData = res.data.records
        this.total = res.data.total
      })
    },
    exportData() {
        this.exportgood()
    },
    exportWord(){
      this.exportGoodsWord()
    },
    async exportGoodsWord(){
      const res = await goods.wordGoods()
      const FILENAME = res.headers['content-disposition']
          ? decodeURIComponent(
              res.headers['content-disposition'].match(/filename=(.*)/)[1]
          )
          : '导出数据.zip'
         const blob = res.data;
         const link = document.createElement('a')
         link.href = URL.createObjectURL(blob)
         //获取后端名字
         console.log(res,"dadadadada")
         link.download = FILENAME
         document.body.appendChild(link)
         link.click()
         window.setTimeout(function() {
           URL.revokeObjectURL(blob)
           document.body.removeChild(link)
         }, 0);

    },
   async exportgood(){
    await  goods.exportGoods(this.goods).then((res)=>{

      const blob = res.data;
      const link = document.createElement('a')
      link.href = URL.createObjectURL(blob)
      //获取后端名字
       link.download = res.headers["content-disposition"]

      document.body.appendChild(link)
      link.click()
      window.setTimeout(function() {
        URL.revokeObjectURL(blob)
        document.body.removeChild(link)
      }, 0);

        // if (res.data.code ===0){
        //   this.$message({
        //     type: "success",
        //     message: '导出成功'
        //   })
        // }else {
        //   this.$message({
        //     type: "error",
        //     message: '导出失败'
        //   })
        // }
      })
    }
  }
}
</script>

<style scoped>
.divStyle{
  width: 250px;
  height: 50px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.card-style{
  font-size: 20px;
  font-family: 黑体;
  font-weight: bold;
  text-align: center;
}
.card-body{
  margin-left: 45px;
  margin-top: 5px;
}
/deep/.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
/deep/.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
/deep/.avatar-uploader-icon {
  font-size: 50px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>